<template>
    <div class="approval-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>待审核商品列表</span>
            <el-button type="primary" @click="fetchPendingProducts" :loading="loading">
              刷新列表
            </el-button>
          </div>
        </template>
  
        <el-table :data="productList" v-loading="loading" style="width: 100%">
          <el-table-column prop="productId" label="商品ID" width="100" />
          <el-table-column label="商品图片" width="120">
            <template #default="{ row }">
              <div class="product-images">
                <el-image 
                  v-for="(img, index) in row.images.split(',')" 
                  :key="index"
                  :src="'http://localhost:8092' + img" 
                  :preview-src-list="row.images.split(',')"
                  fit="cover"
                  class="thumbnail"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="150" />
          <el-table-column prop="price" label="价格" width="100" />
          <el-table-column prop="category" label="分类" width="120" />
          <el-table-column prop="introduction" label="商品简介" show-overflow-tooltip />
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-tag type="warning" effect="dark">
                {{ statusMap[row.approvalStatus] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="{ row }">
              <el-button 
                type="success" 
                size="small"
                @click="handleApprove(row.productId)"
                :loading="row.loading"
              >
                通过
              </el-button>
              <el-button 
                type="danger" 
                size="small"
                @click="handleReject(row.productId)"
                :loading="row.loading"
              >
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import axios from 'axios'
  
  // 状态映射
  const statusMap = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝'
  }
  
  // 响应式数据
  const productList = ref([])
  const loading = ref(false)
  
  // 获取待审核商品
  const fetchPendingProducts = async () => {
    try {
      loading.value = true
      const { data } = await axios.get('http://localhost:8092/product/admin/pending-products')
      if (data.code === 200) {
        productList.value = data.data.map(item => ({
          ...item,
          loading: false
        }))
      }
    } catch (error) {
      ElMessage.error('获取待审核商品失败：' + error.message)
    } finally {
      loading.value = false
    }
  }
  
  // 审核操作
  const handleReview = async (productId, status) => {
  try {
    // 获取当前商品引用
    const product = productList.value.find(item => item.productId === productId)
    if (!product) return
    
    product.loading = true
    
    const { data } = await axios.post('http://localhost:8092/product/admin/approve-product', null, {
      params: { productId, status }
    })
    
    if (data.code === 200) {
      ElMessage.success('操作成功')
      // 更新列表前先重置loading状态
      product.loading = false
      productList.value = productList.value.filter(item => item.productId !== productId)
    }
  } catch (error) {
    ElMessage.error('操作失败：' + error.message)
    // 错误时重新获取当前商品引用
    const currentProduct = productList.value.find(item => item.productId === productId)
    if (currentProduct) {
      currentProduct.loading = false
    }
  }
}
  
  // 通过审核
const handleApprove = (productId) => {
  ElMessageBox.confirm('确定通过该商品的审核吗？', '审核确认', {
    confirmButtonText: '确认通过',
    cancelButtonText: '取消',
    type: 'success'
  })
  .then(() => {
    handleReview(productId, 1)
  })
  .catch(() => {
    // 用户取消操作，不需要执行任何操作，避免报错
  })
}
  
  // 拒绝审核
const handleReject = (productId) => {
  ElMessageBox.confirm('确定拒绝该商品的审核吗？', '审核确认', {
    confirmButtonText: '确认拒绝',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(() => {
    handleReview(productId, 2)
  })
  .catch(() => {
    // 用户取消操作，不需要执行任何操作，避免报错
  })
}
  // 初始化加载
  onMounted(() => {
    fetchPendingProducts()
  })
  </script>
  
  <style scoped>
  .approval-container {
    padding: 20px;
  }
  
  .box-card {
    margin: 0 auto;
    max-width: 1400px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .product-images {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .thumbnail {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 4px;
  }
  
  :deep(.el-image__inner) {
    transition: transform 0.3s;
  }
  
  :deep(.el-image__inner:hover) {
    transform: scale(1.1);
  }
  </style>